<!DOCTYPE html>
<html>
<head>
<link href="css/modern.css" rel="stylesheet"> 
<link href="css/style.css" rel="stylesheet" type="text/css">
</head>

<script>
function validateRadios()
{

	var radios = document.getElementsByName('role');
	for(var i =0; i< radios.length; i++)
	{
		if(radios[i].checked){
			return true;
		}
	}
	
	alert("Please Select a role!");
	return false;

}
</script>

<body>

<div id="container">
	<div id="header"><br>
		<h1 id="main-title"><b><font color = "000000"> EECE Student Group Assessments</b></font></h1>
	</div>
    <div id="body" align="center">
		<div class="error(info, warning)-bar" id="messageDialog"><br>
			<p><b><font color = "black">Login Failed! Invalid username and password!</font></b></p>
		</div>
		<br><br><br><br><br>
		<h2><font size ="18">Login:</font></h2><br>
		<p><font size = "4">Please Login with an ECE account</font></p><br>
		<form id="LoginForm" action = "LoginServlet" method = "post" onsubmit = "return validateRadios()">
			Username:<input type="text" name="username" maxlength="4">
			<br><br>
			Password:<input type="password"  name="password">
			<br><br>
			<input type="radio" name="role" value="Student">Student
			<input type="radio" name="role" value="TA">TA
			<input type="radio" name="role" value="Professor">Professor
			<br><br>
			<input type="submit" value="Login"/>
		</form> </font>
		<div class="button-set" data-role="button-set">
			<a href="http://help.ece.ubc.ca/How_To_Change_Your_Password"  target="_blank" >Forgot Password?</a> 
		</div>
	</div>
	<div id="footer">&copy;UBC Electrical and Computer Engineering. Styled with <a href="http://metroui.org.ua">Metro UI CSS</a> </div>
</div>
</body>
</html>